<template>
    <!--成功图标-->
    <view class="img">
      <image src="/static/success.png" style="width: 50px; height: 50px; margin: 20px;"></image>
    </view>

    <!---->
    <view class="top">
      预约成功
    </view>

    <!--扫码入园卡片，点击后跳转到凭证-->
    <view class="cardview-1">
		  <navigator url="/pages/pingzheng/person-pingzheng">
			      <image src="../../static/scan.png" style="width: 32px; height: 32px;"></image>
			      <text class="Cnote">扫码入园</text>
			      <text class="Enote">scan the QR code to enter the park</text>
		  </navigator>
    </view>

    <!--预约信息，与预约界面以及凭证界面信息一致-->
    <view class="cardview-2">
      <view class="msg1">预约信息：</view>
      <br>
        <view class="msg">姓名:{{name}}</view>
        <br>
        <view class="msg">证件类型:{{idtype}}</view>
        <br>
        <view class="msg">证件号码:{{id}}</view>
        <br>
        <view class="msg">手机号码:{{phone}}</view>
        <br>
        <view class="msg">同行儿童数:{{selectedValue}}人</view>
        <br>
        <view class="msg">同行成人:{{companionname}}</view>
        <br>
        <br>
	  

    <!--取消预约按钮，跳转到首页，清除预约记录-->
      <view class="btnview">
        <button class="button" @click="toindex">
          <text class="button-text">取消预约</text>
        </button>
        <button class="button" @click="topingheng">
          <text class="button-text">查看凭证</text>
        </button>
      </view>
    </view>
</template>

<script setup>
import {onLoad} from '@dcloudio/uni-app'
import {ref} from 'vue';
const name = ref('');
const id = ref('');
const idtype=ref('');
const phone=ref('');
const selectedValue = ref('');
const companionname= ref('');
const selectedDate =ref('');
const selectedTime =ref('');
onLoad((option)=>{
  name.value = option.name;
  id.value= option.idNumber;
  idtype.value=option.Value;
  if (idtype.value==='0'){
    idtype.value='中国居民身份证'
  }else if (idtype.value==='1'){
    idtype.value='护照'
  }else{
    idtype.value='其他'
  }
  phone.value=option.phoneNumber;
  selectedValue.value=option.selectedValue;
  companionname.value=option.companionname;
  selectedDate.value=option.selectedDate;
  selectedTime.value=option.selectedTime;
  console.log(option);
})
const toindex = () => {
uni.navigateTo({
    url: '/pages/yuyue/personal-yuyue',
})
}


const topingheng = () => {
  console.log(companionname.value);
  uni.navigateTo({
    url: '/pages/pingzheng/person-pingzheng?name=' + name.value + '&idNumber=' + id.value + '&Value=' + idtype.value + '&phoneNumber=' + phone.value + '&selectedValue=' + selectedValue.value +'&companionname='+companionname.value+'&selectedDate='+selectedDate.value+'&selectedTime='+selectedTime.value
  })
}

</script>

<style scoped lang="scss">
.img{
  text-align: center;
}
.top{
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  text-align: center;
  height: 21px;
  font-family: PingFangSC-SNaNpxibold;;
  color: #000000;
}

.msg1{
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
  margin-left: 10px;
  align-content: center;
}
.msg{
  width: 293px;
  height: 22px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
  margin: 20px;
}
.btnview{
  position: absolute;
  /* 绝对定位 */
  bottom: 30px;
  /* 距离底部 80px */
  width: 10%;
}

.button{
  width: 311px;
  height: 45px;
  background: #8DCB6D;
  border-radius: 25px;
  margin-bottom: 20px;
}

.button-text{
  width: 68px;
  height: 24px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 17px;
  color: #FFFFFF;
  letter-spacing: 0;
}


.Cnote{
  margin: 10px;
  width: 61.48px;
  height: 21px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 15px;
  color: #05261B;
  letter-spacing: 0;
}

.Enote{
  width: 204.95px;
  height: 17px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #5F5F5F;
  letter-spacing: 0;
}

.cardview-1{
  margin: 12px;
  border-radius: 20px;
  background: #FFFFFF;
  margin: 20px;
  width: 351px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cardview-2{
  margin: 12px;
  border-radius: 20px;
  background: #FFFFFF;
  margin: 20px;
  padding: 20px;
  width: 311px;
  height: 302px;
}
.img{
  max-height: 100%;
  max-width: 100%;
  align-content: center;
}
</style>